<template>
        <el-row :gutter="24">
            <el-col :span="6">
                <div class="name">
                    <div class="avatar">
                        <img :src="star.avatar"/>
                    </div>
                    <div class="info">
                        <el-row>
                            <el-col :span="18">
                                <label>{{star.name}}</label>
                            </el-col>
                            <el-col :span="6">
                                <el-button type="text" size="mini" @click="onEditStar">编辑</el-button>
                            </el-col>
                        </el-row>
                        <el-row>
                            <label class="star-id">{{star.star_id}}</label>
                        </el-row>
                    </div>
                </div>
                <div class="details">
                    <el-form label-width="80px" label-position="left" size="mini">
                        <el-form-item label="状态">
                            <el-switch v-model="star.enable"></el-switch>
                        </el-form-item>
                        <el-form-item label="昵称" v-if="star.nick_name.length > 0">
                            {{star.nick_name}}
                        </el-form-item>
                        <el-form-item label="背景图">
                            <el-button type="text" @click="onClickImage">点击查看</el-button>
                            <img v-img :src="star.background" hidden="true" ref="image"/>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
            <el-col :span="18">
                <el-tabs v-model="activeName" >
                    <el-tab-pane label="粉丝站" name="clubs">
                        <admin-star-clubs-view v-model="$route.params.id" v-if="activeName === 'clubs'"></admin-star-clubs-view>
                    </el-tab-pane>
                    <el-tab-pane label="迁移粉丝站" name="syncClubs">
                        <admin-sync-clubs-view v-model="$route.params.id" v-if="activeName === 'syncClubs'"></admin-sync-clubs-view>
                    </el-tab-pane>
                    <el-tab-pane label="微博搜索词" name="clean">
                        <admin-star-clean-view v-model="$route.params.id" v-if="activeName === 'clean'"></admin-star-clean-view>
                    </el-tab-pane>
                    <el-tab-pane label="净化词管理" name="cleanWords">
                        <admin-star-clean-words-view v-model="$route.params.id" v-if="activeName === 'cleanWords'"></admin-star-clean-words-view>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
</template>
<style lang="scss" scoped>

    .info {
        img {
            position: relative;
            display: inline-block;
            width: 270px;
            height: 180px;
            vertical-align: center;

        }

        padding-top: 12px;
    }

    .details {
        padding-left: 10px;
    }
    .name {
        display: flex;
        flex-direction: row;
        padding: 10px;
        label {
            padding: 10px 10px 10px 10px;
            font-size: 18px;
        }

        .star-id {
            color: gray;
            font-size: 10px;
            font-family: "Courier New";
        }
        .avatar {

            img {
                position: relative;
                display: inline-block;
                width: 60px;
                height: 60px;
                /*圆形显示*/
                border-radius: 50%;
                /*圆形显示*/
                background: rgba(255, 255, 255, 0.1);
                vertical-align: center;
                border: 2px solid gray;
            }
        }
    }
</style>
<script lang="ts">

    import {Vue, Component, Watch} from 'vue-property-decorator'
    import {
        AdminLabel
    } from '../layout'
    import {Api} from "@/api/stars";
    import AdminStarClubsView from './AdminStarClubsView'
    import AdminSyncClubsView from './AdminSyncClubsView'
    import AdminStarCleanView from './AdminStarCleanView'
    import AdminStarCleanWordsView from './AdminStarCleanWordsView'

    @Component({
        name: 'AdminStarsView',
        components: {
            AdminLabel,
            AdminStarClubsView,
            AdminSyncClubsView,
            AdminStarCleanView,
            AdminStarCleanWordsView
        },
    })
    export default class AdminStarsView extends Vue {

        star: Api.Stars.StarInfoResponse = {
            sex:0,
            star_id: "",
            name: '',
            nick_name: '',
            avatar: '',
            background: '',
            enable: false,
        };

        clubs: Api.Stars.GetStarClubsResponse = {
            items: []
        };

        activeName: string = 'clean';

        onClickImage() {
            let img: any = this.$refs['image'];

            img.click()
        }

        loadView() {
            Api.Stars.GetStarInfo({star_id: this.$route.params['id']})
                .then((ack) => {
                    this.star = ack;
                });
        }

        onEditStar() {
            this.$router.push({
                path:`/star/editor/${this.$route.params['id']}`
            })
        }


        @Watch('$route.params.id')
        onIDChange(oldVal:any, newVal:any) {
            this.loadView()

        }

        @Watch('activeName')
        onNameChange() {
            this.$local.SetAttribute("stars.active", this.activeName)
        }

        mounted() {

            this.activeName = this.$local.GetAttribute('stars.active', this.activeName);

            this.loadView()
        }
    }
</script>

<style scoped>

</style>